<template>
	<div class="ask-to-confirm">
		<span>{{cusComponent.value}}</span> <el-button class="btn" @click="clickHandler" v-text="this.field.customDisplayComponentParams.btn.text" v-if="isShowBtn" :loading="this.field.customDisplayComponentParams.btn.loading"></el-button>
	</div>
</template>
<script>
import Vue from "vue"
	export default{
		name:'ask-to-confirm',
		props:{
			value:{
				type:String,
			},
			field:{
				type:Object,
				require:true
			},
			//用来存放经过前端处理过的orginCurrentValue
			currentValue:{
				type:Object
			},
			//用来存放一些request请求相关的数据
			orginCurrentValue:{
				type:Object
			}
		},
		data(){
			return {
				cusComponent:this.field.customDisplayComponentParams,
			}
		},
		computed:{
			isShowBtn(){
				return this.field.customDisplayComponentParams.btn.display
			},
		},
		methods:{
			clickHandler(){
				this.cusComponent.btn.handler.call(this)
			},
			initCusComponent(){
				this.cusComponent.data = this.orginCurrentValue
				this.cusComponent.data.user_id = '' + LA.userInfo['info.id']
				this.cusComponent.init.call(this.cusComponent)
			},
		},
		watch:{
			orginCurrentValue(){
				this.initCusComponent()
			},
		},
		created(){
			this.initCusComponent()
		},
	}
</script>
<style lang="less">
	.ask-to-confirm{
		.btn{
			margin-left:6px;
		}
	}
</style>